<template>
  <div class="product-list-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-section">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-if="currentCategory">{{ currentCategory.name }}</el-breadcrumb-item>
        <el-breadcrumb-item v-if="currentBrand">{{ currentBrand.name }}</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <!-- 搜索区域 -->
    <div class="search-section">
      <el-input 
        v-model="searchKeyword" 
        placeholder="请输入商品名称搜索" 
        class="search-input"
        suffix-icon="Search"
        @keyup.enter="handleSearch"
      />
      <el-button type="primary" @click="handleSearch" class="search-btn">搜索</el-button>
    </div>
    
    <div class="product-content">
      <!-- 左侧筛选面板 -->
      <div class="filter-panel">
        <!-- 分类筛选 -->
        <div class="filter-group">
          <h3 class="filter-title">商品分类</h3>
          <div class="filter-options">
            <div 
              v-for="category in categoryList" 
              :key="category.id"
              class="filter-option"
              :class="{ active: selectedCategoryId === category.id }"
              @click="handleCategoryFilter(category.id)"
            >
              {{ category.name }}
              <span class="option-count">({{ category.count }})</span>
            </div>
          </div>
        </div>
        
        <!-- 品牌筛选 -->
        <div class="filter-group">
          <h3 class="filter-title">品牌</h3>
          <div class="filter-options">
            <div 
              v-for="brand in brandList" 
              :key="brand.id"
              class="filter-option"
              :class="{ active: selectedBrandId === brand.id }"
              @click="handleBrandFilter(brand.id)"
            >
              {{ brand.name }}
              <span class="option-count">({{ brand.count }})</span>
            </div>
          </div>
        </div>
        
        <!-- 价格区间 -->
        <div class="filter-group">
          <h3 class="filter-title">价格区间</h3>
          <div class="price-range">
            <el-input-number 
              v-model="priceMin" 
              :min="0" 
              placeholder="最低价"
              class="price-input"
            />
            <span class="price-separator">-</span>
            <el-input-number 
              v-model="priceMax" 
              :min="priceMin || 0" 
              placeholder="最高价"
              class="price-input"
            />
            <el-button type="default" @click="handlePriceFilter" class="price-btn">确定</el-button>
          </div>
        </div>
        
        <!-- 评分筛选 -->
        <div class="filter-group">
          <h3 class="filter-title">评分</h3>
          <div class="filter-options">
            <div 
              v-for="rating in ratingOptions" 
              :key="rating.value"
              class="filter-option"
              :class="{ active: selectedRating === rating.value }"
              @click="handleRatingFilter(rating.value)"
            >
              <el-rate 
                v-model="rating.starValue" 
                disabled 
                size="small" 
                show-text 
              />
            </div>
          </div>
        </div>
        
        <!-- 特色标签 -->
        <div class="filter-group">
          <h3 class="filter-title">特色标签</h3>
          <div class="filter-options">
            <el-checkbox-group v-model="selectedTags" class="tag-group">
              <el-checkbox 
                v-for="tag in tagOptions" 
                :key="tag.value"
                :label="tag.value"
                class="tag-checkbox"
              >
                {{ tag.label }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        
        <!-- 筛选按钮 -->
        <div class="filter-actions">
          <el-button type="default" @click="resetFilters" class="reset-btn">重置</el-button>
          <el-button type="primary" @click="applyFilters" class="apply-btn">应用筛选</el-button>
        </div>
      </div>
      
      <!-- 右侧商品列表 -->
      <div class="product-list">
        <!-- 排序工具栏 -->
        <div class="sort-toolbar">
          <div class="sort-options">
            <span 
              class="sort-option"
              :class="{ active: sortField === 'default' }"
              @click="handleSort('default')"
            >
              默认
            </span>
            <span 
              class="sort-option"
              :class="{ active: sortField === 'sales' }"
              @click="handleSort('sales')"
            >
              销量
              <el-icon v-if="sortField === 'sales'" :class="{ rotate: sortOrder === 'desc' }">
                <ArrowDown /> 
              </el-icon>
            </span>
            <span 
              class="sort-option"
              :class="{ active: sortField === 'price' }"
              @click="handleSort('price')"
            >
              价格
              <el-icon v-if="sortField === 'price'" :class="{ rotate: sortOrder === 'desc' }">
                <ArrowDown /> 
              </el-icon>
            </span>
            <span 
              class="sort-option"
              :class="{ active: sortField === 'rating' }"
              @click="handleSort('rating')"
            >
              评分
              <el-icon v-if="sortField === 'rating'" :class="{ rotate: sortOrder === 'desc' }">
                <ArrowDown /> 
              </el-icon>
            </span>
            <span 
              class="sort-option"
              :class="{ active: sortField === 'newest' }"
              @click="handleSort('newest')"
            >
              最新
              <el-icon v-if="sortField === 'newest'" :class="{ rotate: sortOrder === 'desc' }">
                <ArrowDown /> 
              </el-icon>
            </span>
          </div>
          
          <div class="view-options">
            <el-radio-group v-model="viewMode" class="view-mode-group">
              <el-radio-button label="grid" title="网格视图">
                <el-icon><Grid /></el-icon>
              </el-radio-button>
              <el-radio-button label="list" title="列表视图">
                <el-icon><List /></el-icon>
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>
        
        <!-- 商品展示区域 -->
        <div 
          class="product-grid"
          :class="{ 'list-view': viewMode === 'list' }"
        >
          <ProductCard 
            v-for="product in productList" 
            :key="product.id"
            :product="product"
            :view-mode="viewMode"
          />
        </div>
        
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
          <el-loading v-loading="loading" element-loading-text="加载中..." />
        </div>
        
        <!-- 空状态 -->
        <div v-else-if="productList.length === 0" class="empty-container">
          <el-empty 
            description="暂无符合条件的商品"
            class="empty-state"
          />
          <el-button type="primary" @click="resetFilters" class="empty-btn">清空筛选条件</el-button>
        </div>
        
        <!-- 分页 -->
        <div v-else class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[12, 24, 36, 48]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    
    <!-- 已选筛选条件 -->
    <div v-if="hasSelectedFilters" class="selected-filters">
      <div class="selected-filters-header">
        <span class="selected-filters-title">已选筛选条件：</span>
        <el-button type="text" @click="resetFilters" class="clear-all-btn">清空全部</el-button>
      </div>
      <div class="selected-filters-content">
        <el-tag 
          v-if="selectedCategoryId"
          closable 
          type="primary"
          @close="handleCategoryFilter(null)"
        >
          分类：{{ getSelectedCategoryName }}
        </el-tag>
        <el-tag 
          v-if="selectedBrandId"
          closable 
          type="primary"
          @close="handleBrandFilter(null)"
        >
          品牌：{{ getSelectedBrandName }}
        </el-tag>
        <el-tag 
          v-if="priceMin !== null || priceMax !== null"
          closable 
          type="primary"
          @close="clearPriceFilter"
        >
          价格：{{ priceMin || 0 }}-{{ priceMax || '不限' }}
        </el-tag>
        <el-tag 
          v-if="selectedRating"
          closable 
          type="primary"
          @close="handleRatingFilter(null)"
        >
          评分：{{ getSelectedRatingLabel }}
        </el-tag>
        <el-tag 
          v-for="tag in selectedTags" 
          :key="tag"
          closable 
          type="primary"
          @close="handleTagRemove(tag)"
        >
          {{ getSelectedTagLabel(tag) }}
        </el-tag>
        <el-tag 
          v-if="searchKeyword"
          closable 
          type="primary"
          @close="clearSearch"
        >
          搜索：{{ searchKeyword }}
        </el-tag>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useProductStore } from '../../store/modules/product'
import { ArrowRight, Search, ArrowDown, Grid, List } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import ProductCard from '../../components/product/ProductCard.vue'

const router = useRouter()
const route = useRoute()
const productStore = useProductStore()

// 响应式数据
const loading = ref(false)
const productList = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(12)
const sortField = ref('default')
const sortOrder = ref('desc')
const viewMode = ref('grid')

// 筛选条件
const searchKeyword = ref('')
const selectedCategoryId = ref(null)
const selectedBrandId = ref(null)
const priceMin = ref(null)
const priceMax = ref(null)
const selectedRating = ref(null)
const selectedTags = ref([])
const currentCategory = ref(null)
const currentBrand = ref(null)

// 分类列表数据
const categoryList = ref([
  { id: 1, name: '手机数码', count: 235 },
  { id: 2, name: '电脑办公', count: 189 },
  { id: 3, name: '家用电器', count: 156 },
  { id: 4, name: '智能家居', count: 123 },
  { id: 5, name: '服饰鞋包', count: 278 },
  { id: 6, name: '美妆个护', count: 145 },
  { id: 7, name: '食品生鲜', count: 210 },
  { id: 8, name: '图书文具', count: 132 }
])

// 品牌列表数据
const brandList = ref([
  { id: 1, name: '品牌1', count: 56 },
  { id: 2, name: '品牌2', count: 43 },
  { id: 3, name: '品牌3', count: 34 },
  { id: 4, name: '品牌4', count: 28 },
  { id: 5, name: '品牌5', count: 22 },
  { id: 6, name: '品牌6', count: 19 },
  { id: 7, name: '品牌7', count: 15 },
  { id: 8, name: '品牌8', count: 12 }
])

// 评分选项
const ratingOptions = ref([
  { value: 5, starValue: 5 },
  { value: 4, starValue: 4 },
  { value: 3, starValue: 3 },
  { value: 2, starValue: 2 },
  { value: 1, starValue: 1 }
])

// 特色标签选项
const tagOptions = ref([
  { value: 'new', label: '新品' },
  { value: 'discount', label: '折扣' },
  { value: 'freeShipping', label: '包邮' },
  { value: 'hot', label: '热销' },
  { value: 'guarantee', label: '正品保障' }
])

// 计算属性：是否有选中的筛选条件
const hasSelectedFilters = computed(() => {
  return selectedCategoryId.value || 
         selectedBrandId.value || 
         priceMin.value !== null || 
         priceMax.value !== null || 
         selectedRating.value || 
         selectedTags.value.length > 0 || 
         searchKeyword.value
})

// 计算属性：获取选中的分类名称
const getSelectedCategoryName = computed(() => {
  if (!selectedCategoryId.value) return ''
  const category = categoryList.value.find(c => c.id === selectedCategoryId.value)
  return category ? category.name : ''
})

// 计算属性：获取选中的品牌名称
const getSelectedBrandName = computed(() => {
  if (!selectedBrandId.value) return ''
  const brand = brandList.value.find(b => b.id === selectedBrandId.value)
  return brand ? brand.name : ''
})

// 计算属性：获取选中的评分标签
const getSelectedRatingLabel = computed(() => {
  if (!selectedRating.value) return ''
  return `${selectedRating.value}分以上`
})

// 获取选中的标签名称
const getSelectedTagLabel = (tagValue) => {
  const tag = tagOptions.value.find(t => t.value === tagValue)
  return tag ? tag.label : tagValue
}

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1
  loadProducts()
}

// 处理分类筛选
const handleCategoryFilter = (categoryId) => {
  selectedCategoryId.value = categoryId
  currentPage.value = 1
  loadProducts()
}

// 处理品牌筛选
const handleBrandFilter = (brandId) => {
  selectedBrandId.value = brandId
  currentPage.value = 1
  loadProducts()
}

// 处理价格筛选
const handlePriceFilter = () => {
  currentPage.value = 1
  loadProducts()
}

// 处理评分筛选
const handleRatingFilter = (rating) => {
  selectedRating.value = rating
  currentPage.value = 1
  loadProducts()
}

// 处理标签移除
const handleTagRemove = (tag) => {
  const index = selectedTags.value.indexOf(tag)
  if (index > -1) {
    selectedTags.value.splice(index, 1)
  }
  currentPage.value = 1
  loadProducts()
}

// 应用筛选
const applyFilters = () => {
  currentPage.value = 1
  loadProducts()
}

// 重置筛选
const resetFilters = () => {
  searchKeyword.value = ''
  selectedCategoryId.value = null
  selectedBrandId.value = null
  priceMin.value = null
  priceMax.value = null
  selectedRating.value = null
  selectedTags.value = []
  sortField.value = 'default'
  sortOrder.value = 'desc'
  currentPage.value = 1
  loadProducts()
}

// 清空价格筛选
const clearPriceFilter = () => {
  priceMin.value = null
  priceMax.value = null
  currentPage.value = 1
  loadProducts()
}

// 清空搜索
const clearSearch = () => {
  searchKeyword.value = ''
  currentPage.value = 1
  loadProducts()
}

// 处理排序
const handleSort = (field) => {
  if (sortField.value === field) {
    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
  } else {
    sortField.value = field
    sortOrder.value = 'desc'
  }
  loadProducts()
}

// 处理分页大小变化
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  loadProducts()
}

// 处理页码变化
const handleCurrentChange = (page) => {
  currentPage.value = page
  loadProducts()
}

// 加载商品列表
const loadProducts = async () => {
  loading.value = true
  try {
    // 构建筛选条件
    const filters = {
      keyword: searchKeyword.value,
      categoryId: selectedCategoryId.value,
      brandId: selectedBrandId.value,
      priceMin: priceMin.value,
      priceMax: priceMax.value,
      rating: selectedRating.value,
      tags: selectedTags.value,
      page: currentPage.value,
      pageSize: pageSize.value,
      sortField: sortField.value === 'default' ? null : sortField.value,
      sortOrder: sortOrder.value
    }
    
    // 模拟API调用，实际项目中替换为真实API
    // const response = await productStore.getProductList(filters)
    // productList.value = response.list
    // total.value = response.total
    
    // 模拟数据
    // 根据不同的筛选条件生成不同的模拟数据
    const mockProducts = generateMockProducts(filters)
    productList.value = mockProducts.list
    total.value = mockProducts.total
    
  } catch (error) {
    ElMessage.error('加载商品列表失败：' + error.message)
  } finally {
    loading.value = false
  }
}

// 生成模拟商品数据
const generateMockProducts = (filters) => {
  // 基础商品列表
  const baseProducts = [
    {
      id: 1,
      name: '超级智能手机 Pro Max',
      image: '/product/hot1.png',
      price: 6999,
      originalPrice: 7999,
      rating: 4.8,
      reviewCount: 1256,
      salesVolume: '5000+',
      categoryId: 1,
      brandId: 1,
      tags: ['new', 'hot']
    },
    {
      id: 2,
      name: '超薄笔记本电脑 Air',
      image: '/product/hot2.png',
      price: 5999,
      originalPrice: 6499,
      rating: 4.9,
      reviewCount: 892,
      salesVolume: '3000+',
      categoryId: 2,
      brandId: 2,
      tags: ['hot', 'freeShipping']
    },
    {
      id: 3,
      name: '智能手表 Series 7',
      image: '/product/hot3.png',
      price: 2199,
      originalPrice: 2499,
      rating: 4.7,
      reviewCount: 765,
      salesVolume: '4000+',
      categoryId: 1,
      brandId: 1,
      tags: ['new', 'guarantee']
    },
    {
      id: 4,
      name: '无线蓝牙耳机 Pro',
      image: '/product/hot4.png',
      price: 1299,
      originalPrice: 1499,
      rating: 4.6,
      reviewCount: 987,
      salesVolume: '6000+',
      categoryId: 1,
      brandId: 3,
      tags: ['discount', 'freeShipping']
    },
    {
      id: 5,
      name: '全新旗舰手机 Ultra',
      image: '/product/new1.png',
      price: 8999,
      originalPrice: 9999,
      rating: 4.9,
      reviewCount: 123,
      salesVolume: '1000+',
      categoryId: 1,
      brandId: 4,
      tags: ['new', 'hot', 'guarantee']
    },
    {
      id: 6,
      name: '便携投影仪 Mini',
      image: '/product/new2.png',
      price: 3299,
      originalPrice: 3699,
      rating: 4.8,
      reviewCount: 89,
      salesVolume: '800+',
      categoryId: 3,
      brandId: 5,
      tags: ['new', 'freeShipping']
    },
    {
      id: 7,
      name: '智能空气净化器',
      image: '/product/new3.png',
      price: 1999,
      originalPrice: 2299,
      rating: 4.7,
      reviewCount: 67,
      salesVolume: '500+',
      categoryId: 3,
      brandId: 6,
      tags: ['guarantee']
    },
    {
      id: 8,
      name: '机械键盘 RGB背光',
      image: '/product/new4.png',
      price: 899,
      originalPrice: 1099,
      rating: 4.6,
      reviewCount: 45,
      salesVolume: '300+',
      categoryId: 2,
      brandId: 7,
      tags: ['discount', 'hot']
    },
    {
      id: 9,
      name: '智能电视 55英寸 4K HDR',
      image: '/product/discount1.png',
      price: 2699,
      originalPrice: 3999,
      rating: 4.7,
      reviewCount: 342,
      salesVolume: '2000+',
      categoryId: 3,
      brandId: 8,
      tags: ['discount', 'freeShipping']
    },
    {
      id: 10,
      name: '无线充电器 15W快充',
      image: '/product/discount2.png',
      price: 129,
      originalPrice: 199,
      rating: 4.5,
      reviewCount: 567,
      salesVolume: '8000+',
      categoryId: 1,
      brandId: 1,
      tags: ['discount', 'hot', 'freeShipping']
    },
    {
      id: 11,
      name: '全自动咖啡机',
      image: '/product/discount3.png',
      price: 4299,
      originalPrice: 5299,
      rating: 4.8,
      reviewCount: 234,
      salesVolume: '1500+',
      categoryId: 3,
      brandId: 5,
      tags: ['new', 'guarantee']
    },
    {
      id: 12,
      name: '运动蓝牙耳机',
      image: '/product/discount4.png',
      price: 399,
      originalPrice: 599,
      rating: 4.6,
      reviewCount: 456,
      salesVolume: '5000+',
      categoryId: 1,
      brandId: 3,
      tags: ['discount', 'freeShipping']
    }
  ]
  
  // 根据筛选条件过滤商品
  let filteredProducts = baseProducts
  
  // 关键词筛选
  if (filters.keyword) {
    const keyword = filters.keyword.toLowerCase()
    filteredProducts = filteredProducts.filter(product => 
      product.name.toLowerCase().includes(keyword)
    )
  }
  
  // 分类筛选
  if (filters.categoryId) {
    filteredProducts = filteredProducts.filter(product => 
      product.categoryId === filters.categoryId
    )
  }
  
  // 品牌筛选
  if (filters.brandId) {
    filteredProducts = filteredProducts.filter(product => 
      product.brandId === filters.brandId
    )
  }
  
  // 价格筛选
  if (filters.priceMin !== null) {
    filteredProducts = filteredProducts.filter(product => 
      product.price >= filters.priceMin
    )
  }
  if (filters.priceMax !== null) {
    filteredProducts = filteredProducts.filter(product => 
      product.price <= filters.priceMax
    )
  }
  
  // 评分筛选
  if (filters.rating) {
    filteredProducts = filteredProducts.filter(product => 
      product.rating >= filters.rating
    )
  }
  
  // 标签筛选
  if (filters.tags && filters.tags.length > 0) {
    filteredProducts = filteredProducts.filter(product => 
      filters.tags.every(tag => product.tags.includes(tag))
    )
  }
  
  // 排序
  if (filters.sortField) {
    filteredProducts.sort((a, b) => {
      let comparison = 0
      switch (filters.sortField) {
        case 'sales':
          comparison = a.salesVolume - b.salesVolume
          break
        case 'price':
          comparison = a.price - b.price
          break
        case 'rating':
          comparison = a.rating - b.rating
          break
        case 'newest':
          comparison = a.id - b.id
          break
        default:
          comparison = 0
      }
      return filters.sortOrder === 'asc' ? comparison : -comparison
    })
  }
  
  // 分页
  const total = filteredProducts.length
  const startIndex = (filters.page - 1) * filters.pageSize
  const endIndex = startIndex + filters.pageSize
  const paginatedProducts = filteredProducts.slice(startIndex, endIndex)
  
  return { list: paginatedProducts, total }
}

// 监听路由参数变化
watch(() => route.query, (newQuery) => {
  if (newQuery.categoryId) {
    selectedCategoryId.value = parseInt(newQuery.categoryId)
    const category = categoryList.value.find(c => c.id === selectedCategoryId.value)
    if (category) {
      currentCategory.value = category
    }
  }
  if (newQuery.brandId) {
    selectedBrandId.value = parseInt(newQuery.brandId)
    const brand = brandList.value.find(b => b.id === selectedBrandId.value)
    if (brand) {
      currentBrand.value = brand
    }
  }
  if (newQuery.keyword) {
    searchKeyword.value = newQuery.keyword
  }
  if (newQuery.recommend) {
    selectedTags.value = [newQuery.recommend]
  }
  // 加载商品列表
  loadProducts()
}, { immediate: true })

// 组件挂载时加载数据
onMounted(() => {
  loadProducts()
})
</script>

<style scoped>
.product-list-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 面包屑导航 */
.breadcrumb-section {
  margin: 20px 0;
}

/* 搜索区域 */
.search-section {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
  max-width: 500px;
}

/* 商品内容区域 */
.product-content {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

/* 左侧筛选面板 */
.filter-panel {
  width: 240px;
  background-color: #fff;
  border-radius: $border-radius-base;
  box-shadow: $shadow-base;
  padding: 20px;
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

.filter-group {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid $border-color;
}

.filter-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.filter-title {
  font-size: $font-size-base;
  font-weight: 500;
  color: $text-color;
  margin-bottom: 12px;
}

.filter-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border-radius: $border-radius-small;
  cursor: pointer;
  transition: all 0.3s;
  font-size: $font-size-sm;
  color: $text-color-secondary;
}

.filter-option:hover {
  background-color: $fill-color-light;
  color: $primary-color;
}

.filter-option.active {
  background-color: $primary-color;
  color: #fff;
}

.option-count {
  font-size: $font-size-xs;
  color: inherit;
  opacity: 0.8;
}

/* 价格区间 */
.price-range {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.price-input {
  width: 80px;
}

.price-separator {
  color: $text-color-secondary;
}

.price-btn {
  margin-top: 8px;
  width: 100%;
}

/* 标签组 */
.tag-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tag-checkbox {
  font-size: $font-size-sm;
  color: $text-color-secondary;
}

/* 筛选按钮 */
.filter-actions {
  display: flex;
  gap: 10px;
}

.reset-btn,
.apply-btn {
  flex: 1;
}

/* 右侧商品列表 */
.product-list {
  flex: 1;
}

/* 排序工具栏 */
.sort-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: $border-radius-base;
  box-shadow: $shadow-base;
  padding: 12px 20px;
  margin-bottom: 20px;
}

.sort-options {
  display: flex;
  gap: 24px;
}

.sort-option {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: $font-size-base;
  color: $text-color-secondary;
  cursor: pointer;
  transition: color 0.3s;
}

.sort-option:hover {
  color: $primary-color;
}

.sort-option.active {
  color: $primary-color;
  font-weight: 500;
}

.sort-option .el-icon {
  transition: transform 0.3s;
}

.sort-option .el-icon.rotate {
  transform: rotate(180deg);
}

.view-mode-group {
  display: flex;
  border: 1px solid $border-color;
  border-radius: $border-radius-base;
  overflow: hidden;
}

/* 商品网格 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* 列表视图 */
.product-grid.list-view {
  grid-template-columns: 1fr;
}

/* 加载状态 */
.loading-container,
.empty-container {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: $border-radius-base;
  box-shadow: $shadow-base;
  padding: 40px;
}

.empty-state {
  margin-bottom: 20px;
}

.empty-btn {
  margin-top: 20px;
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  padding: 20px;
  background-color: #fff;
  border-radius: $border-radius-base;
  box-shadow: $shadow-base;
}

/* 已选筛选条件 */
.selected-filters {
  background-color: #fff;
  border-radius: $border-radius-base;
  box-shadow: $shadow-base;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.selected-filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.selected-filters-title {
  font-size: $font-size-base;
  color: $text-color;
  font-weight: 500;
}

.clear-all-btn {
  color: $text-color-secondary;
  font-size: $font-size-sm;
}

.selected-filters-content {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .filter-panel {
    width: 200px;
  }
}

@media (max-width: 992px) {
  .product-content {
    flex-direction: column;
  }
  
  .filter-panel {
    width: 100%;
    position: static;
  }
  
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .sort-options {
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .product-list-container {
    padding: 0 10px;
  }
  
  .search-section {
    flex-direction: column;
  }
  
  .search-input {
    max-width: 100%;
  }
  
  .sort-toolbar {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .sort-options {
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .product-grid {
    grid-template-columns: 1fr;
  }
  
  .selected-filters-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .filter-panel {
    padding: 16px;
  }
  
  .price-range {
    flex-direction: column;
    align-items: stretch;
  }
  
  .price-input {
    width: 100%;
  }
  
  .sort-toolbar {
    padding: 12px 16px;
  }
  
  .pagination {
    padding: 16px;
  }
}
</style>